<template>
    <div class="box">
        <div class="content">
            <a-row justify="space-between" :gutter="[16, 16]">
                <a-col :span="6" class="item">
                    <div class="title">ESL心跳状态配置</div>
                    <div class="box-item">
                        <div class="desc">定时上报状态</div>
                        <a-switch v-model:checked="eslHeartIs" :checkedValue="1" :unCheckedValue="0" />
                        <div class="form">
                            <span> 间隔 </span>
                            <!-- <a-input
                                v-model:value="eslHeartTime"
                                class="input"
                                :disabled="!eslHeartIs"
                                @change="eslHeartIsFun"
                            ></a-input> -->
                            <a-input-number
                                id="inputNumber"
                                v-model:value="eslHeartTime"
                                @blur="eslHeartIsFun"
                                @pressEnter="eslHeartIsFun"
                                :min="1"
                                :max="100"
                            />
                            <span> 分 </span>
                        </div>
                    </div>
                </a-col>

                <a-col :span="6" class="item">
                    <div class="title">设备下发刷新模式</div>
                    <a-radio-group v-model:value="devDownRefresh">
                        <a-radio v-for="(item, index) in devDownRefreshList" :key="index" :value="item.value">{{
                            item.label
                        }}</a-radio>
                    </a-radio-group>
                </a-col>
                <a-col :span="6" class="item">
                    <div class="title">价格小数点配置</div>
                    <div class="box-item">
                        <div class="desc">是否保留小数点</div>
                        <a-switch v-model:checked="isPriceNumber" :checkedValue="1" :unCheckedValue="0" />
                        <div class="form">
                            <span> 保留 </span>
                            <a-input v-model:value="priceNumber" class="input" :disabled="!isPriceNumber"></a-input>
                            <span> 位 </span>
                        </div>
                    </div>
                </a-col>
                <a-col :span="6" class="item">
                    <div class="title">显示设备信息</div>
                    <span style="margin-right: 10px">温度\状态\电量\信道</span>
                    <a-switch v-model:checked="showDeviceInfo" :checkedValue="1" :unCheckedValue="0" />
                </a-col>
            </a-row>
        </div>
        <a-row type="flex" justify="end">
            <a-button @click="handleSubmit" type="primary" ghost style="margin-top: 10px">保存</a-button>
        </a-row>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, reactive, toRefs, createVNode } from 'vue';
import useMerchant from '../useMerchant';
import { editMerchantExpand } from '@/api/merchant';
import { message, Modal } from 'ant-design-vue';
import { useI18n } from 'vue-i18n';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
interface State {
    eslHeartIs: boolean | number;
    eslHeartTime: number;
    devDownRefresh: number;
    isPriceNumber: boolean | number;
    priceNumber: number;
    showDeviceInfo: boolean | number;
    id: number | string;
}
export default defineComponent({
    props: {
        data: {
            type: Object,
            default: () => false,
        },
    },
    setup(props, { emit }) {
        const { t } = useI18n();
        const devDownRefreshList = ref([
            { label: '节能模式', value: 1 },
            { label: '标准模式', value: 2 },
            { label: '极速模式', value: 3 },
        ]);
        const state: State = reactive({
            eslHeartIs: false,
            eslHeartTime: 0,
            devDownRefresh: 0,
            isPriceNumber: false,
            priceNumber: 0,
            showDeviceInfo: false,
            id: 0,
        });

        watch(
            () => props.data,
            (data) => {
                const { id, eslHeartIs, eslHeartTime, devDownRefresh, isPriceNumber, priceNumber, showDeviceInfo } =
                    data as NormalObj;
                console.log(id);
                state.eslHeartIs = eslHeartIs;
                state.eslHeartTime = eslHeartTime;
                state.devDownRefresh = devDownRefresh;
                state.isPriceNumber = isPriceNumber;
                state.priceNumber = priceNumber;
                state.showDeviceInfo = showDeviceInfo;
                state.id = id;
            }
        );

        // const { merchantExpandData } = useMerchant();

        // const params = { ...value };
        const handleSave = async () => {
            const params = { ...state };
            console.log(params);
            await editMerchantExpand(params);
            message.success('保存成功');
        };

        const handleSubmit = () => {
            Modal.confirm({
                title: t('yl.tip'),
                icon: createVNode(ExclamationCircleOutlined),
                content: t('yl.changeDeptStatusConfirm', { status: '保存', name: '11' }),
                onOk() {
                    handleSave();
                },
                onCancel() {
                    emit('onCancel');
                },
            });
        };
        const eslHeartIsFun = () => {
            console.log(state.eslHeartTime);
        };
        return {
            devDownRefreshList,
            handleSave,
            handleSubmit,
            ...toRefs(state),
            eslHeartIsFun,
        };
    },
});
</script>

<style lang="scss" scoped>
.content {
    .item {
        background: #ffffff;
        border: 1px solid #f0f0f0;
        flex: 0 0 24%;

        // border-radius: 10px;
        // padding: 30px 24px;
        // margin: 5px;
        .title {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #161616;
            margin-bottom: 10px;
        }
        .box-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .desc {
            margin-bottom: 6px;
        }
        .form {
            // margin-top: 10px;
            display: flex;
            width: 197px;
            height: 34px;
            background: #ffffff;
            border: 1px solid #e6e6e6;
            border-radius: 6px;

            .input {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                flex: 1;
                text-align: center;
                border: none;
            }
            span {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #161616;
                display: inline-block;
                padding: 0 12px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}
</style>
